/**
 * 美观的Toast提示
 */

let toastContainer = null

// 初始化Toast容器
function initToastContainer() {
  if (!toastContainer) {
    toastContainer = document.createElement('div')
    toastContainer.className = 'toast-container'
    document.body.appendChild(toastContainer)
  }
  return toastContainer
}

// 显示Toast
export function showToast(message, type = 'success', duration = 3000) {
  const container = initToastContainer()
  
  const toast = document.createElement('div')
  toast.className = `toast toast-${type}`
  
  // 图标
  const iconMap = {
    success: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
      <path d="M9 16.17L4.83 12l-1.42 1.41L9 19 21 7l-1.41-1.41z"/>
    </svg>`,
    error: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-2h2v2zm0-4h-2V7h2v6z"/>
    </svg>`,
    warning: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
      <path d="M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z"/>
    </svg>`,
    info: `<svg viewBox="0 0 24 24" width="20" height="20" fill="currentColor">
      <path d="M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z"/>
    </svg>`
  }
  
  toast.innerHTML = `
    <div class="toast-icon">${iconMap[type] || iconMap.info}</div>
    <div class="toast-message">${message}</div>
  `
  
  container.appendChild(toast)
  
  // 动画显示
  setTimeout(() => {
    toast.classList.add('toast-show')
  }, 10)
  
  // 自动隐藏
  setTimeout(() => {
    toast.classList.remove('toast-show')
    setTimeout(() => {
      container.removeChild(toast)
    }, 300)
  }, duration)
}

// 便捷方法
export const toast = {
  success: (message, duration) => showToast(message, 'success', duration),
  error: (message, duration) => showToast(message, 'error', duration),
  warning: (message, duration) => showToast(message, 'warning', duration),
  info: (message, duration) => showToast(message, 'info', duration)
}

// 添加样式
const style = document.createElement('style')
style.textContent = `
  .toast-container {
    position: fixed;
    top: 80px;
    left: 50%;
    transform: translateX(-50%);
    z-index: 10000;
    pointer-events: none;
  }
  
  .toast {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    padding: 12px 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.15);
    opacity: 0;
    transform: translateY(-20px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    pointer-events: auto;
    min-width: 300px;
    max-width: 500px;
  }
  
  .toast-show {
    opacity: 1;
    transform: translateY(0);
  }
  
  .toast-icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  .toast-message {
    flex: 1;
    font-size: 14px;
    line-height: 1.5;
    color: #333;
  }
  
  .toast-success {
    border-left: 4px solid #52c41a;
  }
  
  .toast-success .toast-icon {
    color: #52c41a;
  }
  
  .toast-error {
    border-left: 4px solid #ff4757;
  }
  
  .toast-error .toast-icon {
    color: #ff4757;
  }
  
  .toast-warning {
    border-left: 4px solid #faad14;
  }
  
  .toast-warning .toast-icon {
    color: #faad14;
  }
  
  .toast-info {
    border-left: 4px solid #1890ff;
  }
  
  .toast-info .toast-icon {
    color: #1890ff;
  }
`
document.head.appendChild(style)

